<template>
  <div class="article-list">
    <!-- van-pull-refresh下拉刷新 -->
    <!-- v-model 表示是否处于下拉刷新中 -->
    <!-- refresh 事件 就是下拉以后执行的事件函数 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <!-- van-list组件 列表组件 可以实现滚动加载 -->
      <!-- v-model 绑定变量表示是否处于加载中 -->
      <!-- finished属性 表示是否所有数据加载完成 -->
      <!-- finished-text 结束之后的文字 -->
      <!-- load事件 页面一旦进入就自动触发 直到页面内容铺满位置 滚动到了底部继续 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item.art_id" :title="item.title" /> -->
        <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.title" /> -->
        <articleItem v-for="(item,index) in list" :key="index" :article="item"></articleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleList } from "@/api/article";
import articleItem from '@/views/home/components/article-item'
export default {
  name: "ArticleList",
  components: {articleItem},
  props: {
    // 设置一个props用来接收属于自己的频道信息数据
    channel: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [], //列表变量
      loading: false, //是否加载中
      finished: false, //是否结束
      timestamp: Date.now(), //时间戳用于分页
      error: false, //是否错误
      isLoading: false, //是否处于下拉加载中
    };
  },
  methods: {
    //   加载列表
    async onLoad(str) {
      try {
        //   测试代码
        // if(Math.random() *10 >8) {
        //     JSON.parse('aaa')
        // }

        // 1 发送请求
        const { data } = await getArticleList({
          channel_id: this.channel.id,
          timestamp: this.timestamp,
          with_top: 1,
        });
        console.log(data);
        // 2 赋值数据(追加数据)
        if (str === "refresh") {
          this.list.unshift(...data.data.results);
        } else {
          this.list.push(...data.data.results);
        }

        // this.timestamp=data.data.pre_timestamp
        // 3关闭loding
        this.loading = false;
        // 4 判断是否结束
        if (data.data.results.length < 10) {
          // 结束为true
          this.finished = true;
        } else {
          // 处理页码
          this.timestamp = data.data.pre_timestamp;
        }
      } catch (error) {
        console.log(error);
        this.error = true;
        this.$toast.fail("获取文章列表失败");
        // 加载关闭
        this.loading = false;
      }

      // 异步更新数据
      //   setTimeout 仅做示例，真实场景中一般为 ajax 请求
      //   setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //       this.list.push(this.list.length + 1);
      //     }

      //     // 加载状态结束
      //     this.loading = false;

      //     // 数据全部加载完成
      //     if (this.list.length >= 40) {
      //       this.finished = true;
      //     }
      //   }, 1000);
    },

    // 下拉刷新
    async onRefresh() {
      // 1 重置还原 (页码 是否结束 数组为空)
      this.finished = false;
      this.timestamp = Date.now();
      // this.list=[]
      // 2 重新拉取列表
      try {
        await this.onLoad("refresh");
      } catch (error) {
        console.log(error);
      }
      // 3 关闭下拉isloding
      this.isLoading = false;
    },
  },
};
</script>

<style scoped lang="less">
.article-list {
  // 百分比单位是相对于父元素的
  // height: 100%;

  // 视口（在移动端是布局视口）单位：vw 和 vh，不受父元素影响
  // 1vw = 视口宽度的百分之一
  // 1vh = 视口高度的百分之一
  height: 79vh;
  overflow-y: auto;
}
</style>
